<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"
	  			xmlns:s="http://jboss.org/schema/seam/taglib"
                xmlns:a="http://richfaces.org/a4j"
				template="template.xhtml">

<!-- content -->
<ui:define name="content">

<div class="section">
	<h1>Payment</h1>
</div>

<div class="section">	
	<h:form id="payment">
		<fieldset>
			<s:decorate template="output.xhtml">
				<ui:define name="label">Name:</ui:define>
				#{hotel.name}
			</s:decorate>
			
			<s:decorate template="output.xhtml">
				<ui:define name="label">Address:</ui:define>
				#{hotel.address}
			</s:decorate>
			
			<s:decorate template="output.xhtml">
				<ui:define name="label">City, State:</ui:define>
				#{hotel.city}, #{hotel.state}
			</s:decorate>
			
			<s:decorate template="output.xhtml">
				<ui:define name="label">Zip:</ui:define>
				#{hotel.zip}
			</s:decorate>
			
			<s:decorate template="output.xhtml">
				<ui:define name="label">Country:</ui:define>
				#{hotel.country}
			</s:decorate>
			
			<s:decorate template="output.xhtml">
				<ui:define name="label">Room Preference:</ui:define>
				#{roomSelection.name}
			</s:decorate>
			
			<s:decorate template="output.xhtml">
				<ui:define name="label">Total payment:</ui:define>
                <h:outputText value="#{roomPreference.expectedPrice}">
                    <f:convertNumber type="currency" 
                                     currencySymbol="$"/>
                </h:outputText>
	        </s:decorate>
	        
	        <s:decorate template="output.xhtml">
				<ui:define name="label">Check In Date:</ui:define>
				<h:outputText value="#{booking.checkinDate}"/>
			</s:decorate>
			
			<s:decorate template="output.xhtml">
				<ui:define name="label">Check Out Date:</ui:define>
				<h:outputText value="#{booking.checkoutDate}"/>
			</s:decorate>
			
			<s:decorate template="edit.xhtml" id="creditCardDecorate">
				<ui:define name="label">Credit Card #:</ui:define>
				<h:inputText id="creditCard" value="#{booking.creditCard}" required="true">
                	<a:ajax event="blur" render="creditCardDecorate"/>
                </h:inputText>
			</s:decorate>
				
			<s:decorate template="edit.xhtml" id="creditCardNameDecorate">
				<ui:define name="label">Credit Card Name:</ui:define>
				<h:inputText id="creditCardName" value="#{booking.creditCardName}" required="true">
					<a:ajax event="blur" render="creditCardNameDecorate"/>
		        </h:inputText>
			</s:decorate>
				
			<s:decorate template="edit.xhtml">
				<ui:define name="label">Credit Card Expiry:</ui:define>
				<h:selectOneMenu id="creditCardExpiryMonth" value="#{booking.creditCardExpiryMonth}">
					<f:selectItem itemLabel="Jan" itemValue="1"/>
					<f:selectItem itemLabel="Feb" itemValue="2"/>
					<f:selectItem itemLabel="Mar" itemValue="3"/>
					<f:selectItem itemLabel="Apr" itemValue="4"/>
					<f:selectItem itemLabel="May" itemValue="5"/>
					<f:selectItem itemLabel="Jun" itemValue="6"/>
					<f:selectItem itemLabel="Jul" itemValue="7"/>
					<f:selectItem itemLabel="Aug" itemValue="8"/>
					<f:selectItem itemLabel="Sep" itemValue="9"/>
					<f:selectItem itemLabel="Oct" itemValue="10"/>
					<f:selectItem itemLabel="Nov" itemValue="11"/>
					<f:selectItem itemLabel="Dec" itemValue="12"/>
				</h:selectOneMenu>
				<h:selectOneMenu id="creditCardExpiryYear" value="#{booking.creditCardExpiryYear}">
					<f:selectItem itemLabel="2005" itemValue="2005"/>
					<f:selectItem itemLabel="2006" itemValue="2006"/>
					<f:selectItem itemLabel="2007" itemValue="2007"/>
					<f:selectItem itemLabel="2008" itemValue="2008"/>
					<f:selectItem itemLabel="2009" itemValue="2009"/>
				</h:selectOneMenu>
			</s:decorate>
				
		</fieldset>
		
		<div class="entry errors">
			<h:messages globalOnly="true"/>
		</div>
		
		<div class="entry">
			<div class="label">&#160;</div>
			<div class="input">
				<h:commandButton id="proceed" value="Proceed" action="#{roomPreference.requestConfirmation}"/>&#160;
				<s:button id="cancel" value="Revise Room" action="#{roomPreference.cancel}"/>
			</div>
		</div>
	</h:form>
</div>
	
</ui:define>

<!-- sidebar -->
<ui:define name="sidebar">

<h1>Nesting conversations</h1>

<p>Nested conversations allow the application to capture a consistent continuable state at various points in a user interaction, thus insuring truly correct behavior in the face of backbuttoning and workspace management.</p>

<p><b>Continuing the conversation</b></p>

<p>Try going back and selecting a different room.  You will notice a new nested conversation in the list of workspace entries.  Each nested conversation is associated with the specific room selected ensuring consistent behavior.</p>


</ui:define>

</ui:composition>
